<template>
  <div class="login-block">
    <div class="login-animate">
      <div class="left-ear"></div>
      <div class="right-ear"></div>
      <div class="head">
        <div class="left-eye"></div>
        <div class="right-eye"></div>
        <div class="face">
          <div class="nose"></div>
          <div class="mouth"></div>
        </div>
      </div>
      <div class="body"></div>
      <div class="left-arm"></div>
      <div class="right-arm"></div>
    </div>
    <div class="login-form">
      <div class="username">
        <input type="text" v-model="username" name="username" placeholder="昵称">
      </div>
      <div class="username">
        <input type="text" v-model="user" name="username" placeholder="用户名">
      </div>
      <div class="password">
        <input type="password" v-model="password" name="password" placeholder="密码">
        <div class="pwd-eye" data-flag="hide"></div>
      </div>
      <div class="password">
        <input type="password" v-model="ConfirmPassword" name="password" placeholder="确认密码">
        <div class="pwd-eye" data-flag="hide"></div>
      </div>
      <div class="btn-login">
        <input type="button" value="注册" @click="register">
      </div>
      <div class="foot">
        <span>忘记密码</span>
        <span> | </span>
        <span @click="goLogin">已有账号</span>
      </div>
    </div>
  </div>
</template>

<script>
  import Cookies from "js-cookie"
  import {ApiConfig} from "@/config/AxiosApi";

  export default {
    name: "RegisterView",
    data(){
      return{
        ApiConfig,
        Cookies,
        user: "",
        password: "",
        username: "",
        ConfirmPassword: "",
        token: ""
      }
    },
    created() {
      if (Cookies.get("token")) {
        this.$router.push("/login")
      }
    },
    methods:{
      goLogin(){
        this.$router.push("/login")
      },
      register(){
        if (this.user === ""||this.username === ""||this.password === ""){
          this.$message({
            message: "提示：请输入完整的注册信息！",
            type:"warning"
          })
          return;
        }
        if(!this.checkUser() || !this.checkPassword()){
          return;
        }
        if (this.password != this.ConfirmPassword){
          this.$message.error("两次密码不相等")
          return;
        }
        this.$axios.post(ApiConfig["register"],
            {
                "userid":this.user,
                "username":this.username,
                "password":this.password
              })
            .then(res=>{
              this.timer = setTimeout(()=>{
                if(res["data"]["token"] !== null){
                  this.$message({
                    message:res["data"]["msg"],
                    type:"success"
                  })
                  Cookies.set("user",this.user,{expires:365})
                  Cookies.set("password",this.password,{expires:365})
                  Cookies.set("username",this.username,{expires:365})
                  Cookies.set("grade","1",{expires:365})
                  Cookies.set("token",res["data"]["token"],{expires:7})
                  this.$router.push("/")
                  return;
                }
                this.$message({
                  message: "注册失败",
                  type: "error"
                })
              },3500);
            })
            .catch(err=>{
              this.$message({
                message:err,
                type: "error"
              })
              console.log(err)
            })
      },
      checkUser(){
        if (this.user.length<4 || this.user.length>20){
          alert("用户名的长度为4-20位")
          return false
        }else if (this.user === 'root' || this.user === 'admin'){
          alert('请输入合法的用户名')
          return false
        }
        return true
      },
      checkPassword(){
        if (this.password.length<6 || this.password.length>20){
          alert("密码的长度为6-20位")
          return false
        }
        return true
      }
    }
  }




  document.addEventListener('DOMContentLoaded', function () {
    var pwdEye = document.querySelector(".pwd-eye");
    pwdEye.style.display = 'none';
    pwdEye.addEventListener('click', function() {
      var flag = pwdEye.getAttribute('data-flag');
      pwdEye.style.backgroundImage = 'url("https://www.edevplat.com/password-' + (flag === 'show' ? 'hide' : 'show') + '.png")';
      pwdEye.setAttribute('data-flag', flag === 'show' ? 'hide' : 'show');
      var passwordInput = document.querySelector('input[name="password"]');
      passwordInput.type = flag === 'show' ? 'password' : 'text';
      var passwordValue = passwordInput.value;
      var leftArm = document.querySelector('.left-arm');
      var mouth = document.querySelector('.mouth');
      var rightArm = document.querySelector('.right-arm');
      if (flag !== 'show' && passwordValue !== '') {
        leftArm.classList.add('show');
        mouth.classList.add('show');
        rightArm.classList.add('show');
      } else {
        leftArm.classList.remove('show');
        mouth.classList.remove('show');
        rightArm.classList.remove('show');
      }
    });
    var usernameInput = document.querySelector('input[name="username"]');
    usernameInput.addEventListener('focus', function() {
      var loginAnimate = document.querySelector(".login-animate");
      loginAnimate.classList.add('username-animate');
      loginAnimate.classList.remove('password-animate');
      var length = usernameInput.value.length;
      getposition(length);
    });
    usernameInput.addEventListener('input', function() {
      var length = usernameInput.value.length;
      getposition(length);
    });
    function getposition(length) {
      var face = parseFloat(1.5/36*length);
      var nose = parseFloat(1/36*length);
      var leftEye = parseFloat(1.5/36*length);
      var rightEye = parseFloat(2/36*length);
      var leftEar = parseFloat(1/36*length);
      var rightEar = parseFloat(1/36*length);
      var faceElement = document.querySelector('.face');
      var noseElement = document.querySelector('.nose');
      var leftEyeElement = document.querySelector('.left-eye');
      var rightEyeElement = document.querySelector('.right-eye');
      var leftEarElement = document.querySelector('.left-ear');
      var rightEarElement = document.querySelector('.right-ear');
      faceElement.style.left = (1 + (face > 1.5 ? 1.5 : face)) + 'em';
      noseElement.style.left = (0.9 + (nose > 1 ? 1 : nose)) + 'em';
      leftEyeElement.style.left = (0.5 + (leftEye > 1.5 ? 1.5 : leftEye)) + 'em';
      rightEyeElement.style.left = (4 + (rightEye > 2 ? 2 : rightEye)) + 'em';
      leftEarElement.style.left = (1.5 - (leftEar > 1 ? 1 : leftEar)) + 'em';
      rightEarElement.style.left = (7.5 - (rightEar > 1 ? 1 : rightEar)) + 'em';
      var leftEyeClasses = document.querySelector('.left-eye').classList;
      var rightEyeClasses = document.querySelector('.right-eye').classList;
      var mouthClasses = document.querySelector('.mouth').classList;
      if (length >= 6) {
        leftEyeClasses.add('doe');
        rightEyeClasses.add('doe');
        mouthClasses.add('doe');
      } else {
        leftEyeClasses.remove('doe');
        rightEyeClasses.remove('doe');
        mouthClasses.remove('doe');
      }
    }
    usernameInput.addEventListener('blur', function() {
      var loginAnimate = document.querySelector(".login-animate");
      loginAnimate.classList.remove('username-animate');
      loginAnimate.classList.remove('password-animate');
      var faceElement = document.querySelector('.face');
      var noseElement = document.querySelector('.nose');
      var leftEyeElement = document.querySelector('.left-eye');
      var rightEyeElement = document.querySelector('.right-eye');
      var leftEarElement = document.querySelector('.left-ear');
      var rightEarElement = document.querySelector('.right-ear');
      faceElement.removeAttribute('style');
      noseElement.removeAttribute('style');
      leftEyeElement.removeAttribute('style');
      rightEyeElement.removeAttribute('style');
      leftEarElement.removeAttribute('style');
      rightEarElement.removeAttribute('style');
    });

    var passwordInput = document.querySelector('input[name="password"]');
    passwordInput.addEventListener('focus', function() {
      pwdEye.style.display = 'block';
      var loginAnimate = document.querySelector(".login-animate");
      loginAnimate.classList.remove('username-animate');
      loginAnimate.classList.add('password-animate');
    });
    passwordInput.addEventListener('blur', function() {
      if (passwordInput.value === '') {
        pwdEye.style.display = 'none';
        var loginAnimate = document.querySelector(".login-animate");
        loginAnimate.classList.remove('username-animate');
        loginAnimate.classList.remove('password-animate');
      }
    });
  });
</script>

<style scoped>
.login-block{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 5em auto 0;
  width: 20em;
  height: 520px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 0 16px rgba(0,0,0,0.2);
}
.login-animate,.password-animate{
  width: 160px;
  height: 160px;
  border-radius: 5em;
  background: #cefefb;
  margin-top: 20px;
  position: relative;
  overflow: hidden;
}
.login-animate div,.password-animate div{
  transition: all 0.5s;
  -o-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
}
.login-animate .body{
  background-image: url("../assets/login/body.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  width: 6.5em;
  height: 6em;
  position: absolute;
  bottom: -2em;
  left: calc(50% - 3.25em);
  z-index: 0;
}
.login-animate .head{
  position: relative;
  background-image: url("../assets/login/face.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  width: 7.5em;
  height: 7.25em;
  position: absolute;
  bottom: 1em;
  left: calc(50% - 3.75em);
  z-index: 1;
}
.login-animate .left-ear{
  background-image: url("../assets/login/left-ear.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  width: 2em;
  height: 2em;
  position: absolute;
  bottom: 5.5em;
  left: calc(50% - 4em);
}
.login-animate .right-ear{
  background-image: url("../assets/login/right-ear.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  width: 2em;
  height: 2em;
  position: absolute;
  bottom: 5.5em;
  left: calc(50% + 2em);
}
.login-animate .left-eye{
  background-image: url("../assets/login/eye.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  width: 1em;
  height: 1em;
  position: absolute;
  bottom: 4em;
  left: calc(50% - 2.5em);
}
.login-animate .right-eye{
  background-image: url("../assets/login/eye.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  width: 1em;
  height: 1em;
  position: absolute;
  bottom: 4em;
  left: calc(50% + 1.5em);
}
.login-animate .face{
  background-image: url("../assets/login/muzzle.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  width: 4em;
  height: 4em;
  position: absolute;
  bottom: 0em;
  left: calc(50% - 2em);
}
.login-animate .nose{
  background-image: url("../assets/login/nose.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  width: 1em;
  height: 1em;
  position: absolute;
  top: 0.5em;
  left: calc(50% - 0.5em);
}
.login-animate .mouth{
  background-image: url("../assets/login/mouth-smile.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  width: 2em;
  height: 1em;
  position: absolute;
  bottom: 1em;
  left: calc(50% - 1em);
}
.login-animate .left-arm{
  background-image: url("../assets/login/left-arm.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  width: 3em;
  height: 7em;
  position: absolute;
  bottom: -7.5em;
  left: 1em;
  z-index: 2;
  transition: bottom 0.5s;
}
.login-animate .right-arm{
  background-image: url("../assets/login/right-arm.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  width: 3em;
  height: 7em;
  position: absolute;
  bottom: -7.5em;
  left: 6em;
  z-index: 2;
  transition: bottom 0.5s;
}
.password-animate .mouth.show{
  width: 1em;
  left: calc(50% - 0.5em);
  background-image: url("../assets/login/mouth-circle.png");
}
.password-animate .left-arm.show,.password-animate .right-arm.show{
  bottom: -1.7em!important;
}
.password-animate .left-arm,.password-animate .right-arm{
  bottom: -0.5em;
}
.username-animate .left-ear {
  left: 1.5em;
}
.username-animate .right-ear {
  left: 7.5em;
}
.username-animate .left-eye {
  left: 0.5em;
  bottom: 3.5em;
}
.username-animate .left-eye.doe,.username-animate .right-eye.doe{
  background-image: url("../assets/login/eye-doe.png");
}

.username-animate .right-eye {
  left: 4em;
  bottom: 3.5em;
}
.username-animate .face {
  left: 1em;
}
.username-animate .nose {
  left: 0.9em;
  top: 0.65em;
}
.username-animate .mouth {
  bottom: 0.75em;
  background-image: url("../assets/login/mouth-half.png");
}
.username-animate .mouth.doe{
  background-image: url("../assets/login/mouth-open.png");
  height: 2em;
  bottom: 0.5em;
}
.login-form{
  width: calc(100% - 5em);
  padding: 0 2.5em;
  margin: 0 auto;
}
.username,.password{
  position: relative;
  width: 100%;
  margin: 20px auto;
  border-radius: 5px;
  overflow: hidden;

}
.username>input,.password>input{
  width: 210px;
  padding: 0 10px;
  height: 2.5em;
  border-radius: 5px;
}
.password>input{
  width: 210px;
  padding: 0 10px 0 10px;
}
.pwd-eye{
  width: 1.2em;
  height: 1.2em;
  position: absolute;
  top: calc(50% - 0.6em);
  right: 20px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../assets/login/password-show.png");
}
.btn-login{
  text-align: center;
}
.btn-login > input{
  width: 240px;
  padding: 12px;
  color: #fff;
  background-color: #b0e2e1;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}
.btn-login > input:hover{
  background-color: rgb(68 152 171);
}
.hello{
  font-size: 26px;
  margin-top: 60px;
  margin-bottom: 20px;
}
.manage > input{
  font-size: 20px;
  width: 100px;
  height: 50px;
  margin-bottom: 20px;
}
.logout{
  font-size: 20px;
  width: 100px;
  height: 50px;
  margin-bottom: 20px;
}
.foot{
  text-align: center;
  margin: 20px 0;
}
.foot > span{
  cursor: pointer;
}
</style>